<template>
    <div class="map-wrap">
        <div class="map-obj" :id="nameid"></div>
        <slot></slot>
    </div>
</template>
<script>
    import {checkType} from '@/utils/bmap-utils.js';
    export default {
        name: "Bmap3",
        props: {
            //地图容器id
            nameid: {
                type: String,
                default() {
                    return 'mapobj'
                }
            },
            ak: {
                type: String,
                default() {
                    return 'pPurcozpqQVKnZg8NTG2peBYbxVZj5rx'
                }
            },
            center: {
                type: [Object, String]
            },
            zoom: {
                type: Number
            },
            minZoom: {
                type: Number
            },
            maxZoom: {
                type: Number
            },
            highResolution: {
                type: Boolean,
            default: true
            },
            mapClick: {
                type: Boolean,
                default: true
            },
            mapType: {
                type: String
            },
            dragging: {
                type: Boolean,
                default: true
            },
            scrollWheelZoom: {
                type: Boolean,
                default: false
            },
            doubleClickZoom: {
                type: Boolean,
                default: true
            },
            keyboard: {
                type: Boolean,
                default: true
            },
            inertialDragging: {
                type: Boolean,
                default: true
            },
            continuousZoom: {
                type: Boolean,
                default: true
            },
            pinchToZoom: {
                type: Boolean,
                default: true
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            theme: {
                type: Array
            },
            mapStyle: {
                type: Object
            }
        },
        data() {
            return {
                mapURL: 'http://api.map.baidu.com/api?v=3.0'
            }
        },
        created(){
            // console.log('created');
        },
        mounted(){
            // console.log('mounted')
            this.resetMap();
        },
        watch: {
            center(val, oldval) {
                const {map, zoom} = this
                if(checkType(val) === 'String' && val != oldval) {
                    // map.setCenter(val)
                    map.centerAndZoom(val, zoom)
                }
            },
            'center.lng'(val, oldval) {
                const {map, zoom, center} = this
                if(val !== oldval){
                    map.centerAndZoom(new BMap.Point(val, center.lat), zoom)
                }
            },
            'center.lat'(val, oldval) {
                const {map, zoom, center} = this
                if(val !== oldval){
                    map.centerAndZoom(new BMap.Point(center.lng, val ), zoom)
                }
            }
        },
        methods: {
            // 初始化地图
            initMap(BMap) {
                if(this.map) return;
                this.map= new BMap.Map(this.nameid)    // 创建Map实例
                // this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)  // 初始化地图,设置中心点坐标和地图级别
                var center = this.getCenter(this.center)
                this.map.centerAndZoom(center, this.zoom)
                this.map.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放

                // if(this[this.nameid]) return;
                // this[this.nameid]= new BMap.Map(this.nameid)    // 创建Map实例
                // this.map = this[this.nameid];
                // // this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)  // 初始化地图,设置中心点坐标和地图级别
                // var center = this.getCenter(this.center)
                // this.map.centerAndZoom(center, this.zoom)
                // this.map.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放
            },
            // 加载js
            getMapScript() {
                // global 全局变量
                const {mapURL, ak, global} = this
                if(!global.BMap) {
                    global.BMap = {}
                    global.BMap._preLoader = new Promise((resolve, reject) => {
                        window._bmapCallback = ()=>{
                            global.BMap = window.BMap
                            resolve(global.BMap)
                            global.BMap._preLoader = null
                            window._bmapCallback = null
                        }
                        let $script = document.createElement('script');
                        document.body.appendChild($script)
                        $script.src = `${mapURL}&ak=${ak}&callback=_bmapCallback`
                    })
                    return this.global.BMap._preLoader
                }else if(!this.global.BMap._preLoader){
                    return Promise.resolve(global.BMap)
                }else{
                    return this.global.BMap._preLoader
                }
            },
            // 重置map
            resetMap(){
                this.getMapScript()
                    .then(this.initMap)
            },
            // 获取地图中心点
            getCenter(val){
                var type = checkType(val)
                switch(type) {
                    case 'String':
                        return val
                        break
                    case 'Object':
                        return new BMap.Point(val.lng, val.lat)
                        break
                    default:
                        return '北京'
                }
            }
        }
    }
</script>
<style scoped lang="scss">
  .map-obj{
    width: 100%;
    height: 500px;
  }
</style>